<template>
  <div v-loading="loading" element-loading-text="加载中..." class="sla_detail">
    <div class="body">
      <div class="header">
        <div class="title">
          <div class="text_container">
            <i class="iconfont icon-detail"></i>
            <div class="txt"
              >SLA名称：<span>{{ DetailSLA?.name }}</span></div
            >
          </div>
          <div class="status">
            <HStatus v-if="!DetailSLA?.status">启用</HStatus>
            <HStatus v-else type="info">禁用</HStatus>
          </div>
        </div>
        <div class="btn_group">
          <HPlainButton @click="goEditDetails(DetailSLA?.id)">编辑</HPlainButton>
          <HPlainButton type="error" @click="onCancel">取消</HPlainButton>
        </div>
      </div>
      <div class="divider_line"></div>
      <div class="main">
        <div class="basic_info" ref="basicInfoRef">
          <!-- 基本信息 -->
          <div class="title">基本信息</div>
          <div class="info_list">
            <div class="info_item">
              <div class="label">适用模块:</div>
              <div class="value">{{ DetailSLA?.modules.join() }}</div>
            </div>
            <div class="info_item">
              <div class="label">提醒方式:</div>
              <div class="value">{{ Typefun() }}</div>
            </div>
            <div class="info_item">
              <div class="label">生效时间:</div>
              <div class="value">{{
                DetailSLA?.dateType == 1 ? '全天' : DetailSLA?.startTime + '-' + DetailSLA?.endTime
              }}</div>
            </div>
            <div class="info_item">
              <div class="label">描述:</div>
              <div class="value">{{ DetailSLA?.remark || '无' }}</div>
            </div>
          </div>
        </div>
        <div class="trigger_condition" :style="triggerConditionStyle">
          <div class="title">触发条件</div>
          <div class="table">
            <el-table :border="true" :data="DetailSLA?.conditionVos" height="100%" resizable stripe>
              <template #empty>
                <el-empty description="暂无数据" />
              </template>
              <el-table-column
                fixed="left"
                label="序号"
                type="index"
                width="60"
                :align="'center'"
              />
              <el-table-column label="触发条件" show-overflow-tooltip width="100">
                <template v-slot="i">
                  <span v-for="(item, index) in typeList" :key="index">{{
                    i.row.type == item.val ? item.name : ''
                  }}</span>
                </template>
              </el-table-column>
              <el-table-column align="right" label="节点时效" width="100">
                <template v-slot="i">
                  <span>{{ i.row.ageingTime }}小时</span>
                </template>
              </el-table-column>
              <el-table-column label="提醒条件" show-overflow-tooltip width="120">
                <template v-slot="i">
                  <div style="display: flex; align-items: center; gap: 7px">
                    <el-switch
                      v-model="i.row.enableBeforeOverTimeRemind"
                      :disabled="!i.row.enabled"
                      inline-prompt
                    />
                    <span :style="{ color: i.row.disabled ? '#333' : '#999' }">超时前</span>
                    <!-- <span v-else :style="{ color: i.row.disabled ? '#333' : '#999' }">超时后</span> -->
                  </div>
                  <span style="display: flex; align-items: center; gap: 7px">
                    <el-switch
                      v-model="i.row.enableAfterOverTimeRemind"
                      :disabled="!i.row.enabled"
                      inline-prompt
                    />
                    <!-- <span
                      :style="{ color: i.row.disabled ? '#333' : '#999' }"
                      v-if="i.row.enableAfterOverTimeRemind"
                      >超时前</span
                    > -->
                    <span :style="{ color: i.row.disabled ? '#333' : '#999' }">超时后</span>
                  </span>
                </template>
              </el-table-column>
              <el-table-column label="提醒时间" min-width="90" show-overflow-tooltip>
                <template v-slot="i">
                  <p v-if="i.row.enableBeforeOverTimeRemind"
                    >超时前：每{{ i.row.beforeOverTimeRemindTime }}小时</p
                  >
                  <p v-if="i.row.enableAfterOverTimeRemind"
                    >超时后：每{{ i.row.afterOverTimeRemindTime }}小时</p
                  >
                </template>
              </el-table-column>
              <el-table-column label="提醒对象类型" min-width="120" show-overflow-tooltip>
                <template v-slot="i">
                  <p v-if="i.row.enableBeforeOverTimeRemind"
                    >超时前：{{ befEmpType(i.row.beforeOverTimeRemindEmpType) }}</p
                  >
                  <p v-if="i.row.enableAfterOverTimeRemind"
                    >超时后：{{ befEmpType(i.row.afterOverTimeRemindEmpType) }}</p
                  >
                </template>
              </el-table-column>
              <el-table-column label="提醒对象" min-width="120" show-overflow-tooltip>
                <template v-slot="i">
                  <p v-if="i.row.enableBeforeOverTimeRemind"
                    >超时前：{{ i.row.slaBeforeOverTimeRemindEmps?.join() || '无' }}</p
                  >
                  <p v-if="i.row.enableAfterOverTimeRemind"
                    >超时后：{{ i.row.slaAfterOverTimeRemindEmps?.join() || '无' }}</p
                  >
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { CSSProperties, nextTick, onMounted, ref, watch } from 'vue'
  import { useRoute, useRouter } from 'vue-router'
  import { ElMessage } from 'element-plus'
  import { getDetail } from '../../../api/sla'
  import HStatus from '@/components/common/status/HStatus.vue'
  import HPlainButton from '@/components/common/button/HPlainButton.vue'
  import { useTagsViewStore } from '@/store/modules/tagsView'
  import routeComponentName from '../../../config/route-component-name'

  defineOptions({
    name: routeComponentName.setting.slaDetailSet,
  })

  //超时前、后提醒人员
  const OverTimeRemindEmpType = ref([
    { name: '工单客服', val: '1' },
    { name: '指定人员', val: '2' },
    { name: '部门负责人', val: '3' },
    { name: '工程师', val: '4' },
  ])
  const remindModeList = ref([
    { name: '系统消息', val: '1' },
    { name: '微信', val: '2' },
    { name: '短信', val: '3' },
  ])
  //触发条件类型
  const typeList = ref([
    { name: '未分配客服', val: 1 },
    { name: '未派单', val: 2 },
    { name: '部门未接单', val: 3 },
    { name: '工程师未接单', val: 4 },
    { name: '工程师未拨打电话', val: 5 },
    { name: '工程师未预约', val: 6 },
    { name: '工程师未签到', val: 7 },
  ])
  const router = useRouter()
  const route = useRoute()
  const loading = ref(false)
  const DetailSLA = ref(null)
  const tagsViewStore = useTagsViewStore()
  const basicInfoRef = ref<HTMLDivElement | null>(null)
  const triggerConditionStyle = ref<CSSProperties>({})
  const setTriggerConditionStyle = async () => {
    await nextTick()
    if (basicInfoRef.value) {
      triggerConditionStyle.value.height = `calc(100% - 12px - ${basicInfoRef.value.scrollHeight}px)`
    }
  }

  // 提醒方式
  const Typefun = () => {
    let str = []
    remindModeList.value.filter((o) => {
      if (DetailSLA.value?.remindMode.includes(o.val)) {
        str.push(o.name)
      }
    })
    return str.join()
  }
  const befEmpType = (arr) => {
    let str = []
    OverTimeRemindEmpType.value.filter((o) => {
      if (arr.includes(o.val)) {
        str.push(o.name)
      }
    })
    return str.join()
  }
  const goEditDetails = (id: string) => {
    router.push('/sla/slanew/' + id)
  }
  // 根据工单策略SLA ID获取详情
  const getDetailSLA = async () => {
    if (!route.params.id) return
    loading.value = true
    await getDetail(route.params.id).then((res) => {
      if (res) {
        if (res.data.code == 20000) {
          DetailSLA.value = res.data.data.row
        } else {
          ElMessage({
            showClose: true,
            message: res.data.message,
            type: 'error',
            duration: 5000,
            plain: true,
          })
        }
      }
    })
    loading.value = false
  }
  // 取消
  const onCancel = () => {
    router.push({ path: '/busic/base/orderset', query: { active: 'OrderSLA' } })
  }

  onMounted(() => {
    getDetailSLA().then(() => {
      setTriggerConditionStyle()
      window.addEventListener('resize', setTriggerConditionStyle)
    })
  })

  watch(
    () => tagsViewStore.getReloadPages,
    (value) => {
      if (value.includes(route.path)) {
        window.removeEventListener('resize', setTriggerConditionStyle)
      }
    },
    { immediate: true, deep: true },
  )
</script>

<style lang="scss" scoped>
  @import './detail';
</style>
